@use '../tp';
@use './common/color';

.#{tp.$prefix}-colswv {
	@include color.checkerboard(10px);

	border-radius: tp.cssVar('blade-border-radius');
	overflow: hidden;

	&.#{tp.$disabled} {
		opacity: 0.5;
	}

	&_sw {
		@extend %tp-input;

		border-radius: 0;
	}
	&_b {
		@extend %tp-resetUserAgent;

		cursor: pointer;
		display: block;
		height: tp.cssVar('container-unit-size');
		left: 0;
		position: absolute;
		top: 0;
		width: tp.cssVar('container-unit-size');

		&:focus::after {
			border: rgba(white, 0.75) solid 2px;
			border-radius: tp.cssVar('blade-border-radius');
			content: '';
			display: block;
			inset: 0;
			position: absolute;
		}
	}
}
